<template>
  <div>
    <el-card>
      人员搜索:
      <el-input
        placeholder="请输入"
        style="width: 200px; margin: 0 20px"
        v-model="params.userName"
      ></el-input>
      角色:
      <el-select
        placeholder="请选择"
        style="width: 200px; margin: 0 20px"
        @visible-change="changes"
        v-model="params.roleId"
        :filterable="true"
      >
        <el-option
          v-for="item in list"
          :key="item.index"
          :label="item.roleName"
          :value="item.roleId"
        ></el-option>
      </el-select>
      <el-button type="primary" @click="searchFn">查询</el-button>
    </el-card>
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="indexId" label="序号"> </el-table-column>
        <el-table-column prop="userName" label="人员名称"> </el-table-column>
        <el-table-column prop="roleName" label="角色"> </el-table-column>
        <el-table-column prop="mobile" label="联系电话" width="120px;">
        </el-table-column>
        <el-table-column prop="workCount" label="完成工单（本月)">
        </el-table-column>
        <el-table-column prop="progressTotal" label="进行中工单">
        </el-table-column>
        <el-table-column prop="cancelCount" label="拒绝工单(本月)">
        </el-table-column>
        <el-table-column prop="mobile" label="操作">
          <template #default="scope">
            <el-button type="text" @click="view(scope.row)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalCount"
        @current-change="changeFn"
      >
      </el-pagination>
    </el-card>
    <el-dialog title="人员详情" :visible.sync="dialogVisible" width="60%">
      <div>
        <span>人员名称:运维刘俊杰</span> <span>角色：维修员</span>
        <span>联系电话:18940843614</span> <span>负责区域:霍营街道</span>
      </div>
      <div>
        <table width="579px" cellspacing="0" border="1px">
          <tr class="tr1">
            <th></th>
            <th>总工单数</th>
            <th>拒绝工单</th>
            <th>完成工单</th>
            <th>进行中工单</th>
          </tr>
          <!-- <tr>
            <td>本周</td>
            <td>{{ item.total }}</td>
            <td>{{ tableData.cancelCount }}</td>
            <td>{{ tableData.workCount }}</td>
            <td>{{ tableData.progressTotal }}</td>
          </tr>
          <tr>
            <td>本月</td>
            <td>{{ tableData.total }}</td>
            <td>{{ tableData.cancelCount }}</td>
            <td>{{ tableData.workCount }}</td>
            <td>{{ tableData.progressTotal }}</td>
          </tr>
          <tr>
            <td>本年</td>
            <td>{{ tableData.total }}</td>
            <td>{{ tableData.cancelCount }}</td>
            <td>{{ tableData.workCount }}</td>
            <td>{{ tableData.progressTotal }}</td>
          </tr> -->
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserList,
  getRoleList,
  getGdInfo,
  getWorkDetail,
  getUserDetail,
} from "@/api/rygl";
export default {
  data() {
    return {
      list: [],
      dialogVisible: false,
      tableData: [],
      list: [],
      totalCount: 0,
      workList: [],
      params: {
        pageIndex: 1,
        pageSize: 5,
        userName: "",
        roleId: "",
        isRepair: false,
      },
      roles: [],
    };
  },
  methods: {
    async getUserList() {
      const res = await getUserList(this.params);
      console.log(res.data);
      this.tableData = res.data.currentPageRecords.map((item, index) => ({
        ...item,
        indexId: index + 1,
      }));
      this.totalCount = res.data.totalCount - 0;
    },
    changeFn(current) {
      this.params.pageIndex = current;
      this.getUserList();
    },
    async getRoleList() {
      const res = await getRoleList();
      console.log(res);
      this.list = res.data;
      console.log(this.list);
    },
    async getGdInfo() {
      const res = await getGdInfo();
      console.log(res);
    },
    searchFn() {
      this.getUserList();
      this.params.roleId = "";
    },
    changes() {
      this.getRoleList();
    },
    async view(row) {
      try {
        this.DialogVisible = true;
        const res = await getUserDetail(id);
        console.log(res);
        this.listDate = { ...res };
        this.params.userId = id;
        const resdate = await getWorkDetail(this.params);
        this.numberList = resdate;
        this.params.end = dayjs().endOf("week").format("YYYY-MM-DD HH:mm:ss");
        const resweek = await getWorkDetail(this.params);
        this.numberListWeek = resweek;
        this.params.end = dayjs().endOf("month").format("YYYY-MM-DD HH:mm:ss");
        const resmonth = await getWorkDetail(this.params);
        this.numberListMonth = resmonth;
        // console.log(this.numberList)
      } catch (error) {
        console.log(error);
      }
    },
    created() {
      this.getUserList();
    },
  },
};
</script>

<style>
.el-card {
  margin-bottom: 20px;
}
</style>
